<template>
    <el-dialog
        v-model="dialogModel"
        align-center
        :show-close="false"
        style="padding: 0"
        :fullscreen="fullscreen"
        :modal="modal"
        :draggable="draggable"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :width="width"
    >
        <template #header>
            <div
                :class="`py-${spacing} fs-12 fr-ac-jsb px-15`"
                :style="{
                    background: background,
                    backgroundSize: 'cover',
                    color: '#fff',
                }"
            >
                <p>{{ title }}</p>
                <p @click="toClose">×</p>
            </div>
        </template>
        <div :style="{ maxHeight: height + 'px' }" class="main roll-width">
            <slot name="main"></slot>
        </div>
    </el-dialog>
</template>

<script>
import { ref,watch } from "vue";

export default {
    props: {
        dialog: {
            default: false,
            type: Boolean,
        },
        fullscreen: {
            default: false,
            type: Boolean,
        },
        modal: {
            default: true,
            type: Boolean,
        },
        draggable: {
            default: false,
            type: Boolean,
        },
        width: {
            default: "50%",
            type: [String, Number],
        },
        height: {
            default: 600,
            type: Number,
        },
        title: {
            default: "",
            type: String,
        },
        spacing: {
            default: 6,
            type: Number,
        },
        background: {
            //"url(https://file.gkzzd.cn/www/gkzzd/uploads/20250620/2bf6b18a8dbb35256c8ce09c349fd3dc.png) no-repeat"
            default: "red",
            type: String,
        },
    },
    methods: {
        toClose() {
            this.$emit('close')
        }
    },
    setup(props) {
        const dialogModel = ref(false);
        watch(()=>props.dialog,(newVal,oldVal)=>{
            dialogModel.value = newVal
        })
        return {
            dialogModel,
        };
    },
};
</script>
<style lang="scss">
.el-dialog__header {
    padding: 0;
}
.main {
    overflow: auto;
}
</style>